<template>
    <div>
        <ChartLine :yMax='100' yUnit='ms'  title="网络时延" :yStyle="yStyle" :seriesData='dataList' :xName='xName' :legendName="legendName"></ChartLine>
    </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue';
import ChartLine from '@/components/chart/line/index.vue';
export default defineComponent({
    name: 'sdkUpgrade',
    components: { ChartLine },
    setup() {
        const dataList: Array = reactive([
            {
                name: '云端安保机器人',
                data: [0, 93, 2, 93, 50, 100, 0, 60, 93, 0, 93, 0, 60, 70,0],
                type: 'line',
                smooth: true,
                symbol: 'none'
            },
            {
                name: '云端安保机器人',
                data: [0, 0, 0, 30, 100, 50, 60, 72, 63, 80, 83, 40, 50, 60,80],
                type: 'line',
                smooth: true,
                yAxisIndex: 1,
                symbol: 'none'
            }
        ]);
        const yStyle = {
            type: 'value',
            axisLabel: {
                formatter: '{value} Mbps'
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#c0c4cc'
                }
            },
            splitLine: {
                show: false
            }
        };
        const xName = ref(['2009/6/12 2:00','2009/6/12 2:30', '2009/6/12 3:00', '2009/6/12 4:00', '2009/6/12 5:00', '2009/6/12 6:00', '2009/6/12 7:00', '2009/6/12 8:00', '2009/6/12 9:00', '2009/6/12 10:00', '2009/6/12 11:00', '2009/6/12 12:00', '2009/6/12 13:00', '2009/6/12 14:00', '2009/6/12 15:00']);
        // const areaColor = ref(['#CBE8FD', '#D5F2E8']);
        const legendName = ref(['云端安保机器人']);

        return { dataList, xName, legendName, yStyle };
    }
});
</script>

<style lang="" scoped>
</style>